Осваиваем CSS: макет страницы

• Главная
• ->
• Материалы
• ->
• Осваиваем CSS: макет страницы

Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Перейти на сайт->

Бесплатный Курс "Практика HTML5 и CSS3"

Освойте бесплатно пошаговый видеокурс

по основам адаптивной верстки

на HTML5 и CSS3 с полного нуля.

Начать->

Фреймворк Bootstrap: быстрая адаптивная вёрстка

Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.

Верстайте на заказ и получайте деньги.

Получить в подарок->

Бесплатный курс "Сайт на WordPress"

Хотите освоить CMS WordPress?

Получите уроки по дизайну и верстке сайта на WordPress.

Научитесь работать с темами и нарезать макет.

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

Получить в подарок->

*Наведите курсор мыши для приостановки прокрутки.

Назад Вперед

Осваиваем CSS: макет страницы

Одно из главных преимуществ CSS - возможность контролировать внешний вид страницы без использования тэгов оформления HTML. Однако, создание CSS-шаблонов незаслуженно получило репутацию чего-то сложного, особенно среди тех разработчиков, кто еще только осваивает данную технологию. Отчасти это связано с тем, что не все браузеры одинаково интерпретируют CSS, но еще больше - с тем фактом, что сейчас существует просто огромное количество разных техник создания макетов средствами таблиц стилей.

Кажется, будто каждый веб-разработчик имеет свои собственные приемы и техники верстки CSS-шаблонов, и начинающие вебмастера зачастую используют какую-то технику даже не понимая, как она работает. Такой подход по типу "черного ящика" к использованию CSS помогает, конечно, получить результат быстро, но, в конечном счете мешает росту понимания языка разработчиком.

Однако все эти различные техники имеют в своей основе три основных концепции: позиционирование, обтекание, манипулирование внешними отступами. Различные техники при ближайшем рассмотрении оказываются не такими уж и различными, и, если вы освоите основным понятия и концепции, то вам будет относительно легко создать ваш собственный CSS-шаблон страницы.

Центрирование дизайна

Длинные строки текста читать очень неудобно или даже трудно. По мере того, как мониторы и их разрешения продолжают расти, проблема удобочитаемости текста с экрана встает все острее. Один из способов справиться с данным вопросом - отцентровать содержание страницы. Вместо того, чтобы растягивать контент на всю ширину экрана, центрированные дизайны занимают только часть экрана, благодаря чему строки приобретает удобную для чтения длину.

Страницы с центрацией контента сейчас широко распространены, поэтому изучение способов создания центрированного дизайна с помощью CSS - одна из первых вещей, которую хотят освоить начинающие веб-разработчики. Существует два основных способа центрации дизайна: в одном случае используются автоматические внешние отступы, в другом - позиционирование и отрицательные отступы.

Центрирование с использованием автоматических внешних отступов

Предположим, перед вами стоит типичная задача отцентровать по горизонтали контейнер div с id wrapper ("обертка").

Для осуществления этого на практике нужно просто задать ширину div wrapper и установить горизонтальные внешние отступы в значение auto.

В данном примере ширина установлена в пикселях. Но, разумеется, с таким же успехом можно указать ее в процентах от ширины тела документа body, либо использовать размер в "em" относительно размера текста.

Такой способ работает во всех современных браузерах, но не в IE 6. К счастью, IE неправильно интерпретирует свойство text-align: center, выравнивая по центру все, а не только текст. Вы можете использовать это себе во благо, центрируя все, что находится в тэге body, включая и div wrapper, переназначая затем выравнивание на left для содержимого блока wrapper.

Использование свойства text-align подобным образом является по сути хаком, но он совсем безобиден и не окажет неблагоприятного воздействия на ваш код. Сейчас наш блок wrapper отцентрирован и в IE 6, точно так же, как и в других браузерах, которые лучше дружат со спецификацией.

Центрирование дизайна с использованием позиционирования и отрицательных отступов

Метод с использованием автоматических внешних отступов - наиболее популярный подход, но при его использовании приходится прибегать к хаку. Также он требует стилевого оформления двух элементов вместо одного. Именно по этой причине многие предпочитаю использовать позиционирование и отрицательные отступы.

Начинаем, как и в предыдущем примере - с установки ширины wrapper. Затем устанавливаем свойство position для wrapper в значение relative и свойство left в значение 50%. Это позволяет нам разместить левый край блока wrapper в центре страницы.

Нам, однако, нужно немного другое - мы хотим видеть в центре страницы центр блока wrapper. Добиться этого можно, применив отрицательный отступ с левой стороны блока wrapper равный половине ширины этого блока. Это сдвинет блок wrapper на половину его ширины влево, перемещая его в центр экрана:

Ваш выбор способа центрации зависит только от вашего вкуса. Однако, всегда полезно знать несколько способов и техник, так как нельзя угадать, что может вам пригодиться.

Шаблоны на основе обтекания

Существует несколько способов создания шаблонов средствами CSS, включая абсолютное позиционирование и отрицательные отступы. Я считаю наиболее простым в использовании метод, основанный на обтекании одних элементов другими. Как ясно из названия, в такого типа шаблонах вы просто устанавливаете ширину позиционируемых элементов, а затем задаете им обтекание слева или справа.

Поскольку такие "обтекаемые" элементы больше не занимают никакого места в потоке документа, они не оказывают никакого влияния на окружающие их блочные элементы. Чтобы обойти такое поведение, вам нужно будет отменить обтекание на различных опорных точках вашего шаблона. Вместо того, чтобы последовательно применять обтекание и его отмену, удобнее использовать несколько другой подход: применять обтекание практически ко всему а затем отменять его один или два раза в "стратегических" точках документа, вроде футера.

Двухколоночный шаблон с использованием обтекания

Для создания простого двухколоночного шаблона с использованием обтекания, начнем с базовой структуры (X)HTML. В нашем примере (X)HTML-каркас состоит из зон: branding, content, зоны для навигации и футера. Вся данная структура заключена в "обертку" - wrapper, который будет выровнен по горизонтали одним из описанных выше способов.

Главная навигация будет слева, а контент - с правой стороны. Однако в структуре страницы я поместил зону контента выше зоны навигации. Основная причина этого заключается в том, что содержание страницы наиболее важно и должно быть помещено в документе как можно выше, ближе к его началу.

Обычно, когда люди создают шаблоны и использованием обтекания, они придают свойству float значение left для обеих колонок, после чего создают "поле" между колонками, используя свойства margin или padding. При использовании такого подхода колонки плотно прижаты в доступном им пространстве - так, что "не продохнуть". Обычно это не вызывает проблем, но некоторые браузеры разрушают такой "плотный" дизайн, при этом колонки выстраиваются в столбик - одна под другой.

Это может происходить в IE, потому что в IE за основу берется "размер" контента, а не содержащего контент элемента. В браузерах, придерживающихся стандартов, если контент не помещается в блоке, он просто выходит за его пределы. В IE, однако, если контент не помещается в содержащем его элементе, то он "растягивает" элемент, увеличивая его в размере. Если подобная вещь происходит в плотном, зажатом дизайне, то у элементов больше не остается места, чтобы оставаться рядом друг с другом, и один из них как бы "проваливается", опускается ниже другого.

Чтобы избежать подобного развития событий, старайтесь не переполнять блок, содержащий ваш дизайн с обтеканием. Вместо использования горизонтальных внешних и внутренних отступов, (margin, padding) вы можете создать "виртуальные поля" придавая одному блоку float:left, а другому - float:right.

Сейчас, если один из элементов незначительно (в пределах нескольких пикселей) увеличится в размерах, вместо того, чтобы разрушить весь дизайн, вытеснив один из блоков ниже другого, произойдет "наплывание" блока на территорию "виртуального поля".

Код CSS для достижения данной цели самоочевиден. Мы просто устанавливаем желаемую ширину для каждой из колонок, после чего указываем для навигации float:left, а для контента - float:right.

Затем, для того, чтобы корректно позиционировать футер под навигацией и контентом, для него нужно отменить обтекание.

Базовый вариант готов. Добавим еще пару штрихов. Внутренние отступы сверху и снизу для всего блока навигации и внутренние отступы слева и справа для списка пунктов в навигационном меню.

Проставим также отступ справа в зоне контента:

Вот и все, теперь у нас готов простой двухколоночный макет на CSS.

Трехколоночный шаблон с использованием обтекания

HTML-каркас для построения трехколоночного шаблона очень похож на тот, что мы использовали с двухколоночным с той лишь разницей, что в нем появляются два дополнительных блока div: один для основного контента и еще один - для дополнительного.

Используя те же самые правила CSS, что и в случае двухколоночного шаблона, мы можем придать блоку основного контента float:left, а блоку дополнительного - float:right. Все это будет происходить внутри уже правильно спозиционированного основного блока content. Таким образом мы разделяем вторую колонку content на две, получая трехколоночный макет.

Как и раньше, CSS-код очень прост. Нужно просто указать желаемую ширину для каждого из блоков и задать каждому свое обтекание.

Можно немного подчистить шаблон, удалив внутренний отступ из блока content, применив его непосредственно к контенту блока secondaryContent:

Таким образом, мы получаем с вами вот такой симпатичный трехколоночный макет.

Andy Budd, Cameron Moll и Simon Collison: "CSS Mastery: Advanced Web Standards Solutions"webreference.com Перевод - Дмитрий Науменко

P.S. Хотите больше материалов по прикладной верстке? Посмотрите бесплатные курсы ниже. Это серия видео по резиновой верстке сайта и бесплатный курс по основам адаптивной верстки. Они помогут вам быстрее получить необходимые навыки:

Понравился материал и хотите отблагодарить? Просто поделитесь с друзьями и коллегами!

Смотрите также:

Наверх

www.codeharmony.ru

Каркас сайта

Здравствуйте уважаемые начинающие веб-мастера.

В этой части мы рассмотрим, как создаётся блочный каркас сайта, средствами html и СSS, а так же напишем несколько вариантов кода каркаса сайта.Итак, начнём. Для обозначенной цели откроем редактор Notepad++ (или другой подобный), и создадим следующую html конструкцию, на основе которой и будем создавать каркас сайта.

Для тех, кто ещё не представляет где пишется код, и как просмотреть то, что отобразит браузер, сначала необходимо прочитать статью Как создать каркас страницы, и установить Notepad++.

Давайте подробно рассмотрим эту запись, почему именно такие названия у блоков с идентификаторами.

1. <div id=”wrapper”> — wrapper (оболочка), в нём располагаются другие блоки. Необходимость его Вы скоро поймёте.

Теперь, в таблице стилей, задаём этим блокам предварительные параметры. Подключим стили глобальным способом, в тело тега head, при помощи тега style.

Оболочке ”wrapper” прописываем ширину (высота по  мере заполнения увеличивается автоматически), временную рамку, внутренний отступ, и выравнивание по центру страницы.

Для шапки задаём высоту, фоновый цвет, и внешний отступ снизу, для того, чтоб следующие блоки не прижались к нему вплотную.

Для блоков “sidebar”, “content”, и ”footer” — высоту, и отступ снизу, зададим пока такие же, как и у “header”, а фоновый цвет дадим, временно, каждому свой, чтоб они друг от друга отличались.

Теперь посмотрим на то, что у нас получилось

Вот такое вышло начало. Все блоки одинаковой высоты расположились друг под другом и оболочка раздвинулась и заключает их в себе.

Теперь задаём сайдбару полагающуюся ему ширину, примерно в 200 пикселей, и смещаем на привычный правый край, задав внешний отступ слева в 700px, так как общая заданная ширина составляет 900px (900-200=700).

Смотрим результат.

Сайдбар занял своё место и готов к дальнейшим преобразованиям

И вот теперь пришло время познакомиться с ещё одним замечательным свойством CSS, которое называется float (наплывание).

Прописываем его в селектор “sidebar”, и происходит следующее: блок сайдбар, как бы приподнимется, и освободит место для других блоков, которые тут же его займут, а сайдбар, как бы наплывёт на них.  В значении у «float» ставим  «right»(справа), так как сайдбар находится справа.

Давайте посмотрим.

Теперь нам осталось укоротить блок “content”, Так как общая заданная длина у нас 900px, то расчёт делается исходя из этого: 900-200(ширина сайдбара) — 10(ширина зазора между блоками)=690px.

Смотрим.

Теперь полностью код каркаса сайта, один сайдбар справа

Каркас сайта с одним сайдбаром слева. Найдите три отличия в коде.

Каркас сайта с двумя колонками

И, до кучи, вариант с тремя сайдбарами разделёнными на блоки.

Копируйте, вставляйте в редактор, и колдуйте с конструкцией, размерами и расцветками каркаса сайта. Можете задавать блокам свойства border или border-radius, добавляя тем самым рамочки и закругляя углы.

На следующей странице, «Запрет наплывания» (float), узнаем как делается подвал (footer), и начнём заполнять каркас сайта.

Перемена

— Мальчик, — нервничает учитель, — у тебя в голове опилки.— Вот здорово! — улыбается ученик. — Мама говорила, что у меня там совсем ничего нет.

Как сделать изображение кнопки в Paint < < < В раздел > > > Каркас сайта (продолжение). 

starper55plys.ru

html - What is the correct way to do a CSS Wrapper?

The best way to do it depends on your specific use-case.

However, if we speak for the general best practices for implementing a CSS Wrapper, here is my proposal: introduce an additional <div> element with the following class:

... for those of you, who want to understand why, here are the 4 big reasons I see:

In the answer currently accepted Aron says width. I disagree and I propose max-width instead.

Setting the width of a block-level element will prevent it from stretching out to the edges of its container. Therefore, the Wrapper element will take up the specified width. The problem occurs when the browser window is smaller than the width of the element. The browser then adds a horizontal scrollbar to the page.

Using max-width instead, in this situation, will improve the browser's handling of small windows. This is important when making a site usable on small devices. Here’s a good example showcasing the problem:

So in terms of Responsiveness, is seems like max-width is the better choice!-

I’ve seen a lot of developers still forget one edge case. Let’s say we have a Wrapper with max-width set to 980px. The edge case appears when the user’s device screen width is exactly 980px. The content then will exactly glue to the edges of the screen with not any breathing space left.

Generally, we’d want to have a bit of padding on the sides. That’s why if I need to implement a Wrapper with a total width of 980px, I’d do it like so:

Therefore, that’s why adding padding-left and padding-right to your Wrapper might be a good idea, especially on mobile.

By definition, the Wrapper has no semantic meaning. It simply holds all visual elements and content on the page. It’s just a generic container. Therefore, in terms of semantics, <div> is the best choice.

One might wonder if maybe a <section> element could fit this purpose. However, here’s what the W3C spec says:

The element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.

The <section> element carries it’s own semantics. It represents a thematic grouping of content. The theme of each section should be identified, typically by including a heading (h2-h6 element) as a child of the section element.

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information.

It might not seem very obvious at first sight, but yes! The plain old <div> fits best for a Wrapper!

Here's a related question. Yes, there are some instances where you could simply use the <body> element as a wrapper. However, I wouldn’t recommend you to do so, simply due to flexibility and resilience to changes.

Here's an use-case that illustrates a possible issue: Imagine if on a later stage of the project you need to enforce a footer to "stick" to the end of the document (bottom of the viewport when the document is short). Even if you can use the most modern way to do it - with Flexbox, I guess you need an additional Wrapper <div>.

I would conclude it is still best practice to have an additional <div> for implementing a CSS Wrapper. This way if spec requirements change later on you don't have to add the Wrapper later and deal with moving the styles around a lot. After all, we're only talking about 1 extra DOM element.

stackoverflow.com

Верстаем фиксированный макет сайта. | Веб-мастерская Ларисы Ворониной

Фиксированный макет сайта – это макет с определённой фиксированной шириной. Все колонки и блоки тоже имеют фиксированные размеры, независимо от разрешения экрана.

Будем верстать вот такой макет:

В редакторе создаём новый документ index.html (синтаксис html), и пишем разметку нашего макета .

<!DOCTYPE html><html>     <head>          <meta charset="utf-8">          <link rel="stylesheet" type="text/css" href="style.css" />          <title>Фиксированный макет</title>     </head>     <body>          <div>               <div>                    <h2>Шапка сайта</h2>               </div>               <div>                    <h3>Главное меню</h3>               </div>              <div>                   <h3>Сайдбар</h3>              </div>              <div>                   <h3>Контент</h3>              </div>              <div>                   <h3>Подвал</h3>               </div>          </div>     </body> </html>

Обратите внимание, что весь макет сайта обёрнут в div с классом wrapper. Этот слой является как бы подложкой для макета сайта, и на фоне этой подложки будут располагаться:

- Шапка сайта (div с классом head),

- Главное меню сайта (div с классом menu),

- Сайдбар (div с классом sidebar),

- Контент (div с классом content),

- подвал (div с классом footer).

Если мы откроем index.html в браузере, то увидим вот это:

Ну а теперь пишем стили, т.е. приводим разметку к нужному нам виду.

В редакторе создаём новый файл style.css (синтаксис css), и начинаем ваять.

Пишем стили для класса wrapper.

• Определяем цвет и ширину подложки для сайта.

.wrapper {background: #85C8E1;width: 1000px;}

• Располагаем макет сайта  по центру.

margin: 0 auto;overflow: hidden;

Пишем стили для шапки (для класса head).

• Размещаем блок div с классом head по центру.

.head {margin: 0 auto;overflow: hidden;

• Задаём фоновый цвет.

background: #242A64;

• Делаем отступ сверху.

margin-top: 20px;

• Задаём отступы для текста.

padding: 20px;

• Определяем высоту и ширину блока.

width: 920px;height: 130px;

Как мы вычислили ширину и высоту? Очень просто, давайте рассуждать:

Ширина всего макета 1000 px.

Ширина шапки у нас должна быть меньше на 20px справа и на 20px слева, т.е. 1000 – 40 = 960px.

Паддинги у нас по 20px с каждой стороны, следовательно 960 – 40 = 920px.

Таким же образом вычисляется и высота шапки. Если мы хотим сделать высоту шапки 170px, то из 170 вычитаем опять же наши паддинги по 20px снизу и сверху. У нас получается 170 – 40 = 130px.

• Закругляем углы.

border-radius: 7px;-moz-border-radius: 7px;-webkit-border-radius: 7px;

• Определяем цвет для текста и выравниваем его по середине блока.

color: #fff;text-align: center;

Пишем стили для блока меню.

Подробно я здесь расписывать уже не буду, я думаю и так всё понятно. Единственное скажу, что паддинги иногда приходится подгонять.

.menu {margin: 0 auto;overflow: hidden;margin-top: 20px;background: #242A64;padding: 0 20px 40px 20px;width: 920px;height: 30px;border-radius: 7px;-moz-border-radius: 7px;-webkit-border-radius: 7px;color: #fff;text-align: left;}

 Определяем стили для сайдбара.

Чтобы поместить сайдбар слева применяем свойство float со значением left.

.sidebar {float:left;background: #242A64;width: 180px;height: 660px;margin: 20px;padding: 20px;border-radius: 7px;-moz-border-radius: 7px;-webkit-border-radius: 7px;color: #fff;text-align: left;}

Стили контента.

Контент будет располагаться справа от сайдбара, поэтому применяем свойство float со значением right.

.content {float:right;background: #242A64;width: 680px;height: 660px;margin:20px 20px 20px 0;padding: 20px;border-radius: 7px;-moz-border-radius: 7px;-webkit-border-radius: 7px;color: #fff;text-align: center;}

Подвал (footer).

.footer {margin: 0 auto;overflow: hidden;margin-top: 20px;margin-bottom: 20px;background: #242A64;padding: 0 20px 40px 20px;width: 920px;height: 30px;border-radius: 7px;-moz-border-radius: 7px;-webkit-border-radius: 7px;color: #fff;text-align: center;}

В итоге файл style.css должен выглядеть вот так:

.wrapper {background: #85C8E1;width: 1000px;margin: 0 auto;overflow: hidden;}.head {margin: 0 auto;overflow: hidden;background: #242A64;margin-top: 20px;padding: 20px;width: 920px;height: 130px;border-radius: 7px;-moz-border-radius: 7px;-webkit-border-radius: 7px;color: #fff;text-align: center;}.menu {margin: 0 auto;overflow: hidden;margin-top: 20px;background: #242A64;padding: 0 20px 40px 20px;width: 920px;height: 30px;border-radius: 7px;-moz-border-radius: 7px;-webkit-border-radius: 7px;color: #fff;text-align: left;}.sidebar {float:left;background: #242A64;width: 180px;height: 660px;margin: 20px;padding: 20px;border-radius: 7px;-moz-border-radius: 7px;-webkit-border-radius: 7px;color: #fff;text-align: left;}.content {float:right;background: #242A64;width: 680px;height: 660px;margin:20px 20px 20px 0;padding: 20px;border-radius: 7px;-moz-border-radius: 7px;-webkit-border-radius: 7px;color: #fff;text-align: center;}.footer {margin: 0 auto;overflow: hidden;margin-top: 20px;margin-bottom: 20px;background: #242A64;padding: 0 20px 40px 20px;width: 920px;height: 30px;border-radius: 7px;-moz-border-radius: 7px;-webkit-border-radius: 7px;color: #fff;text-align: center;}

Проверить валидность CSS кода можно на этом сайте: https://jigsaw.w3.org/css-validator/.

www.fly-webmaster.ru

The Best Way to Implement a "Wrapper" in CSS

Sometimes the first bit of HTML we write in a new document is an element that wraps everything else on the page. The term wrapper is common for that. We give it a class, and that class is responsible for encapsulating all visual elements on the page.

I've always struggled to with the best way to implement it. I found a related thread on StackOverflow that has more than 250,000 views, so obviously I'm not the only one wondering! I'll sum up my latest thoughts in this article.

Before we dive into it, let's first examine the difference between the "wrapper" and the "container".

"Wrapper" vs "Container"

I believe there is a difference between wrapper and container elements.

In programming languages, the word container is generally used for structures that can contain more than one element. A wrapper, on the other hand, is something that wraps around a single object to provide more functionality and interface to it.

So, in my opinion, it makes sense to have two different names because they intend different functions.

Speaking of the wrapper, it's common to think of a <div> that contains all the rest of the HTML of the document. I'm sure many of us have lived through a time where we set that to 960px in width and center aligned all our main content. Wrappers are also used for things like applying a sticky footer.

The container, on the other hand, usually intends another kind of containment. One that sometimes necessary to implement a behavior or styling of multiple components. It serves the purpose of grouping elements both semantically and visually. As an example, Bootstrap has "container classes" that house their grid system or contain various other components.

The terms wrapper and container can also mean the same thing depending on the developer and what they intend. There might be other conventions too, so the best advice is usually to implement whatever makes the most sense to you. But remember, naming is one of the most fundamental and important parts of developer activities. Naming conventions make our code more readable and predictable. Choose carefully!

Here's an example of a general page wrapper:

width vs max-width

Setting the width of a block-level element will prevent it from stretching out to the edges of its container (good for things like readable line lengths). Therefore, the wrapper element will take up the specified width. The problem occurs when the browser window is narrower than the specific width of the wrapper. That will trigger a horizontal scrollbar, which is almost always undesirable.

Using max-width instead, in this situation, is better for narrower browser windows. This is important when making a site usable on small devices. Here's a good example showcasing the problem.

See the Pen CSS-Tricks: The Best Way to Implement a CSS Wrapper by Kaloyan Kosev (@superKalo) on CodePen.

In terms of responsiveness, max-width is the better choice!

Additional Padding

I've seen a lot of developers forget one particular edge case. Let's say we have a wrapper with max-width set to 980px. The edge case appears when the user's device screen width is exactly 980px. The content then will exactly glue to the edges of the screen with no breathing room left.

We usually want a bit of padding on the edges. That's why if I need to implement a wrapper with a total width of 980px, I'd do it like so:

Therefore, that's why adding padding-left and padding-right to your wrapper might be a good idea, especially on mobile.

Or, consider using box-sizing so that the padding doesn't change the overall width at all.

Which HTML Element to Choose

A wrapper has no semantic meaning. It simply holds all visual elements and content on the page. It's just a generic container. In terms of semantics, <div> is the best choice. The <div> also has no semantic meaning and it just a generic container.

One might wonder if maybe a <section> element could fit this purpose. However, here's what the W3C spec says:

The <section> element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.

The <section> element carries it's own semantics. It represents a thematic grouping of content. The theme of each section should be identified, typically by including a heading (h2-h6 element) as a child of the section element.

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information.

It might not seem very obvious at first sight, but yes! The plain ol' <div> fits best for a wrapper!

Using the <body> tag vs. Using an additional <div>

It's worth mentioning that there will be some instances where one could use the <body> element as a wrapper. The following implementation will work perfectly fine:

And it will result in one less element in your markup because you can drop that unnecessary wrapper <div> this way.

However, I wouldn't recommend this, due to flexibility and resilience to changes. Imagine if on a later stage of the project any of these scenarios happen:

• You need to enforce a footer to "stick" to the end of the document (bottom of the viewport when the document is short). Even if you can use the most modern way to do it - with flexbox, you need an additional wrapper <div>.
• You need to set the background-color of the whole page. Normally, whatever background you set on the <body> will behave as if it was set on the <html> element should it not already have a background. Just a weird thing in CSS. But if your <html> element does already have a background, and you set the body to something else, and the body has any kind of spacing constraint, backgrounds will get weird. It's a tricky thing.

I would conclude it is still best practice to have an additional <div> for implementing a CSS wrapper. This way if spec requirements change later on you don't have to add the wrapper later and deal with moving the styles around. After all, we're only talking about one extra DOM element.

Related

css-tricks.com

Урок 4. Блочная верстка: html разметка.

Отлично, мы уже с Вами знаем что такое блочная верстка, как пользоваться фотошопом во время верстки, создали базовые элементы для дальнейшей верстки. Теперь же давайте перейдем непосредственно к html разметки нашей веб-страницы. Откройте файл, созданный нами во 2 уроке, а также Psd шаблон сайта в фотошопе и нажмите TAB. Отлично, поехали

Определимся сразу.Есть два варианта верстки. Пишем html разметку и тут же наводим красоту через каскадные таблицы стилей, и второй: пишем html разметку всю, а затем наводим красоту с помощью css файла. Я приверженец второго стиля написания, потому как: 1 – видно всю картину, так как позиционировать и настраивать с помощью css проще когда видишь картинку целиком, 2 – разделение крупы и молока:) не будем все мешать разберемся куче кода

Вспомните, что такое блочная верстка, мы же будем добавлять блоки, делать вложения блоков в блоки для того, чтобы увидеть конечную картинку.

Вспомним как мы разделили наш шаблон на функциональные зоны: header, content, sidebar и footer. Но надо понимать, что это не единственные блоки в коде. Давайте зададим оболочку, которой мы дадим рамку и верхний фон (картинка размером 1*26), также данная оболочка будет выставлять наш сайт по центру. Добавим между тегом body новый код:

Отлично оболочка есть. Обычно они получают именно такие именна, часто каркас называют как wrapper, main и т.д. В зависимости от дизайна может быть несколько основных оболочек: например, сложный фон с наложением картинок одна на другую.

Посмотрите на шаблон. Начнем его вырисовывать в html коде. Будем идти сверху вниз. Шапка сайта. Добавим ее внутрь оболочки (wrap):

Центральная часть по сути это 2 зоны: content и sidebar. Логично их поместить в единый контейнер для более удобного позиционирования блоков. При составлении css кода у Вас все уложится в голове. Назовем блок middle и аналогично добавим footer:

Отлично каркас готов. Теперь будем углубляться.

Шапка сайта

Пишем код сверху вниз, слева направо. Логотип. Добавим код будущего логотипа. Можно конечно просто добавить картинку и задать ей свойства, но давайте сделаем более грамотно. Добавим логотип через css (класс, например logo) и кликабельный логотип с помощью тега а:

Меню. Обычно меню формируют как немаркированный список. Так как такие CMS как wordpress, joomla и т.д. создают меню по такому принципу.Зададим списку класс для настройки его внешнего вида, а также меню – это обычно всегда ссылки:

Поздравляю, с шапкой сайта мы закончили :). Можете напонить стакан с кофе и продолжать дальше

Центральная часть сайта.

В блок middle добавим наши функциональные зоны: content и sidebar, и общая структура будет такова:

В блоке content у нас 4 одинаковых блока с картинками и текстом. Давайте добавим блок. Думаю Вы уже догадались как это делается:)

У меня картинка называется 1.jpg, у Вас конечно может и по-другому. Не забываем обязательные аттрибуты картинки: высота, ширина и альтернативный текст.Тег img не закрывайте, помните наш DOCTYPE. Заогловок под картинкой я выбрал h3(тег заголовка), будем равномерно распределять теги заголовков :), ну и простой текст. Теперь скопируйте блок с классом block и вставьте друг за другом еще 3 раза.

Кнопки. Добавим просто 2 ссылки сразу после последнего блока с картинкой:

Сайдбар – боковая панель.

Давайте разметим сайдбар. В первую очередь это окошко с твитами. Как послушные граждане поместим все это дело в блок с текстом и маленькой картинкой птички:

Текст Follow Us on Twitter и картинку птички, которая обрамлена ссылкой, мы поместили в тег span для их общей настройки оформления. Будем двигать эти элементы.

Еще одно меню. Создаем его аналогично, добавим класс для оформления меню и тег заголовка h4. НЕ перепутайте, заголовок должен быть вне списка.

И наконец, последний блок Контактов в сайдбаре. Все просто, доабляем блок, заголовок и текст:

Теперь Ваш сайдбар должен выглядить вот так:

Футер – подвал сайта.

Последний штрих. Давайте добавим footer: тексту копирайта добавим класс, чтобы поменять размер и цвет. И для каждой кнопки блок с соответствующим классом поместив внутрь картинку со ссылкой и текстом. Все аналогично выше описанному.

Поздравляю, Вас! Вот и мы закончили html разметку. Остался еще небольшой рывок. Главное у себя в голове разложить все по полочкам. Посмотрев на сайт,Вы уже должны видеть как лучшего его раложить на составляющие.

Как всегда Вы можете скачать исходники и сравнить с своими творениями.И помните, что верстка сайта – это целое творчество каждый может представить свое решение, каждое решение может быть правильным, все на Ваше усмотрение

Не забывайте если у Вас есть вопросы, то можете задать их в комментариях.

UPDATE: В статье были использованы id (индентификаторы) для блоков сайта лишь для удобства, и визуального восприятия. В дальнейших уроках по достижению нового уровня я объясню почему лучше использовать классы.

с/у УтБ

Сегодня на десерт фанаты firefox,  а Вы еще на другом браузере??

html исходники 4 урока (файл index.html) (1546)

www.gtalk.kz

Div верстка. Как ее использовать, различные варианты исполнения

В интернете очень много материалов по поводу div-ов. Поэтому я решил создать такую статью, которая бы все содержала бы в себе, что касается блочной верстки. Из данной статьи Вы узнаете, как создать Вашу первую страницу, используя блочную верстку. Но основной акцент данной статьи я все-таки хочу сделать на различных проблемах, с которыми сталкиваются обычные пользователи, особенно новички, которые только начинают свое знакомство с Div-ами. Благодаря этой статье мы рассмотрим всевозможные варианты употребления div-ов, узнаем, что можно делать с этими блоками, как их изменять и вообще как ими пользоваться. Под статьей Вы увидите комментарии, оставляйте свои комменты, вопросы, и я обязательно помогу решить Вашу проблему и даже добавлю Вашу проблему в основную статью для остальных пользователей.

Div — верстка, это что такое?

Раньше, в эпоху становления интернета сайты верстались с помощью таблиц, что было достаточно неэффективно, и на смену этому устаревшему способу пришел новый — блочная верстка, используя Div-ы. Как видно, даже названия методов верстки сайтов отражают те теги, которые используются в создании сайта. Раньше это был тег <table> сейчас тег <div>.

Если взглянуть практически на любой современный сайт, то можно отметить их некоторое сходство, а именно присутствие на этих сайтах определнных зон: меню (menu), контент (content), шапка (header), низ сайт (footer). Такие зоны есть практически у любого сайта. А выглядят они все примерно так, как показано ниже.

На рисунке разными цветами я указал разными цветами зоны моего сайта. Красным — шапку, зеленым — меню, синим — контент, черным — низ сайта. В середине конента также я добавил блок названия статьи, и собственно блок самой статьи (текста). Вот таким образом выглядит процентов 70 сайтов в интернете, может быть только блоки меняются местами, но суть остается такой же.

Преимущества блочной div верстки

Преимущества дивной верстки следующие:

• меньше кода, а значит меньше «мусорных» тегов на странице
• возможность более гибкой разметки, т.к. каждый div не привязан ни к чему (в отличие от ячейки таблицы)
• возможность поменять местами блоки в коде не характерным способом (например, сначала идет контент, а потом идет шапка, хотя визуально сначала идет шапка, а потом контент)
• гораздо больше возможностей для разных JavaScript’ов
• современный вариант (табличная верстка более не применяется)

Начинаем кодить, используя Div (тег <div>)

Естественно, начинать мы будем с простого, а цель у нас создать макет сайта, который изображен выше. Да, весь код, который необходимо писать на страницах я буду включать в соответствующие коды.

Давайте создадим простенький шаблон страницы, используя div-ы. Учтите, данный код надо выставить после <body> и перед </body>. Ну это я надеюсь объяснять Вам не нужно.

<div> block 1 </div> <div> block 2 </div> <div> block 3 </div>

Что получилось? На странице должны появится слова:  block 1, block 2, block 3, которые идут в столбик, один за другим, при этому на странице больше ничего нет. Такой же эффект, кстати, можно получить, используя html тег <p>. Вы спросите, и что дальше. А вот теперь то и начинается самое интересное. Для того, чтобы управлять нашими div-ами, изменять их и вообще делать с ними все, что Вашей душе угодно (на самом деле не все, но это в конце статьи) мы обязаны использовать файл CSS. Я не буду здесь подробно останавливаться на нем, так как думаю, что Вы знаете, что это такое. Желательно сразу себя приучить подключать файл стилей к своим страницам сразу же, а не вставлять в каждый файл стили. В итоге у нас должно получиться два файла: index.html и style.css — данные файлы необходимо создать в любом редакторе (даже блокнот сгодиться), главное, это правильно задать расширение файла при его сохранении.

Давайте теперь зададим для наших div-ов разделительную полосу красного цвета. Внимание, ниже код который нужно указать в css.

div{ border: 1px solid red; }

Этот же код вставляем в index.html

<html> <head> <link href=»style.css» rel=»stylesheet»> <head> <body> <div> block 1 </div> <div> block 2 </div> <div> block 3 </div> </body> </html>

Создав эти два файла (style.css и index.html) и открыв index.html мы увидим всё то же самое, что и в предыдущем случае, но у каждого дива будет красная граница. «Управлять» блоками мы будем с помощью CSS и присвоения конкретному div’у собственного класса. Сразу говорю, что писать что-то вроде style=»color: #a00;» (то есть использовать инлайновые стили) прямо на html-странице считается дурным тоном, а позже усложнит жизнь и вам — сложно отлаживать такую страницу. (представьте что Вы что-то захотели изменить на сайте, а у Вас тысячи страница, устанете изменять. Тут же просто надо изменить всего один файл.

Свойство float для Div-ов

Вот мы и создали выделение наших блоков красной линий, но, как говориться, на этом далеко не уедешь. Поэтому давайте разместим наши блоки горизонтально. Чтобы это сделать, воспользуемся отличным свойство CSS — float. Данное свойство отвечает за выравнивание наших блоков, и с помощью данного свойства мы сможем выравнивать наши блоки как нам хочется. Теперь давайте разместим наши блоки горизонтально, один за другим. ВНИМАНИЕ! Задать выравнивание можно только слева или справа, по центру выравнивания нет, учтите это! Напишем наш код в CSS.

.div{ border: 1px solid red; float: left; }

Если мы сейчас откроем страницу в нашем браузере, то получим результат — наши дивы располагаются друг за другом. При этом их ширина зависит от того контента, который находится в этих дивах, и вычисляется автоматически браузером. Если второму div-у задать свойства float:right, то мы увидим, что второй блок прибился к правой стороне нашей страницы. Таким образом легко можно задавать порядок наших дивов и формировать меню или контент. В будущем каждому div-у желательно задавать ширину, что потом не получалось всякой ненужной нам мишуры.

Важно! Сразу хочу отметить, если Вы новичок в css, то сразу привыкайте к хорошему, а именно используйте в css классы, а не id. Это поможет Вам в будущем, особенно тогда, когда Вы будете работать с библиотеками jQuery. Кроме того, названия классов очень рекомендуется писать «говорящие». Например, для контента желательно назвать класс дива .content, а для сайдбара — .sidebar. Если же Вы желаете выделить какое-то свойство для определенного элемента на Вашей странице, тогда используйте #id.

Важно! В коде Вы можете заметить странную приписку в html — <div style=»clear: both;»></div>. Что это за непонятный такой третий div спросите Вы? Все просто, уважаемые программеры, мы обязаны сообщить браузеру, что после этой команды, все остальные div-ы должны идти ниже предыдущих. Если это не сделать, то может получиться нехорошая ситуация, когда дивы выстраиваются в одну колонку, или нализают друг на друга. Это команда браузеру типа html тега <br>, но для  div-ов.

Свойство padding и margin для div-oв

Важные свойства в блочной верстке div-ами. И умения ими пользоваться помогут Вам в создании индивидуальных дизайнерских решений для Вашего сайта. Изначально, если упустить эти свойства наших div-ов (блоков), то мы получим следующую картину, что все div-ы располагаются вплотную к друг другу, в независимости от того, идут они друг за другом или один под другим. Именно благодаря нашим свойствам, таким как padding и margin — можно задавать промежутки между div- ами, либо внутри самих дивов. Например:

.div{ border: 1px solid red; float: left; padding: 10px; margin-right: 10px; }

Данным кодом в CSS мы указали нашим дивам расстояние между ними, а также расстояние внутреннего контента внутри самого блока.

Если же нам нужно, чтобы один наш блок (div) располагался на каком-то особенном расстоянии от своего соседнего блока, то нам необходимо использовать свойство margin.

Важно! Свойства padding и margin имеют следующие параметры. Если мы просто зададим количество пикселей и все, это то, что мы проделали с padding, то со всех четырех сторон будем сделано это расстояние. Если задать две величины, например так: margin: 10px 5 px. То сверху и снизу будет расстояние в 10px, а слева и справа по 5px.

Важно! Также существуют и персонализированные промежутки. Они задаются присвоением к нашим свойствам слов bottom (низ), top (верх), left, right. В нашем примере, приведенном выше мы используем расстояние справа.

Свойство border — задаем границы нашим div-ам

Бывает, что нам нужно задать отчетливую границу нашим блокам, чтобы наглядно демонстрировать их разницу между собой. В этом случае нам необходимо свойство border. Благодаря этому свойству мы сможем задать границу нашему диву по нашему выбору. Данное свойство имеет три параметра, которые разделяются пробелами. Первый — ширина, задается пикселями. Собственно это ширина нашей границы. Второй параметр — стиль. Стилей достаточно много, и потребуется целая статья, чтобы описать их все. Какие могут быть стили? Например двойная граница, или прерывистая. И так далее. В нашем примере мы используем solid — одиночную линию заданной ширины. Третий параметр — это собственно цвет. Может задаваться 16-ричным кодом, либо словом по-английски, например black.

Также можно указывать границу для каждой из сторон нашего div-а, для этого воспользуйтесь уже упомянутыми top, bottom, left, right. Пример кода ниже.

.div{ border: 1px solid red; float: left; padding: 10px; margin-right: 10px; border: 1px solid red; }

Свойство width и height для div-ов

Вот теперь мы можем задать нашим div-ам ширину и высоту, что сделает наши дивы более наглядными. Просто добавьте в свойства каждого класса наших div-ов width:300px; height:500 px. Откроем теперь нашу страницу, вы увидите, что наши блоки стали намного больше и теперь выглядят более полноценно. Забегу сразу вперед и скажу, что ширина и высота может задаваться в пикселях или процентах. Учтите это. 

Wrapper. Что это и зачем?

Мы с Вами дошли до довольно важного момента в верстке сайта, а именно до wrapper-а. Вы сами должны выбрать использовать его Вам в будущем или нет, но я Вам советую использовать его. Но для начала давайте поймем, что это вообще такое.

Обычно, при создании сайта нам нужно, чтобы наш сайт был по центру нашего окна браузера. При этом обычно мы задаем нашему сайту какие-то фиксированные параметры, ширину там или высоту. Поэтому нам бы хотелось, чтобы все это отлично выглядело и было наглядным. Поэтому появился такой div-блок, который назвали Wrapper. Он представляет из себя некий контейнер, в котором находятся все остальные блоки.

Как его использовать? Для этого мы создаем наш div wrapper сразу же после тега <body>, после чего размещаем внутри нашего враппера все остальные блоки нашего сайта, а затем закрываем div wrapper.

В CSS мы задаем нашему wrapper-у фиксированную ширину (обычно указывают 990 px, но здесь можно эксперементировать — это связано с тем, что на данный момент большинство пользователей используют разрешение 1024×768, но разрешение все время растет, поэтому в будущем эту величину надо менять), а также указываем следующее: margin-left: auto; margin-right: auto;

Все это сделает наш сайт оцентрованным по середине, при этом надо учитывать, что у нашего тега <body> тоже есть свои отступы, поэтому желательно их сразу убрать. Вставляем код ниже в наш CSS файл.

body, html{ margin: 0px; padding: 0px;

Также прошу Вас заметить, что если мы хотим изменить расстояние сверху или вообще с любой другой стороны, то лучше всего воспользоваться свойством margin у wrapper.

Div верстка — Кодим блочную верстку ИТОГ

Так, ну вот и пришло время, чтобы, наконец нам сверстать весь сайт, который был показан на картинке выше. Ниже я указал код, который должен быть в index.html и в style.css.

index.html

header

this is sidebar

bottom

CSS файл:

body, html{ font: 12px tahoma; margin: 0px; padding: 0px; } div{ text-align: center; } .wrap{ width: 990px; margin-left: auto; margin-right: auto; background: #ddd; padding: 10px; } .header{ background: #e25e5e; height: 100px; margin-bottom: 10px; padding: 10px; } .sidebar{ float: left; padding: 10px; width: 300px; background: #5ee28d; height: 700px; } .content{ float: left; padding: 10px; margin-left: 10px; background: #5e86e2; width: 640px; height: 700px; text-align: left; } .bottom{ background: #141926; height: 60px; margin-top: 10px; padding: 10px; }

Из вышепредставленного кода Вы можете видеть, что, благодаря блочной верстке, мы сократили наш код в index.html до минимума, при этом, наша страница очень функциональна, ее легко видоизменять, при этом редактируя всего один файл style.css. Вот собственно и все, можете пользоваться этим кодом или делать свой на примере этого.

ОБНОВЛЕНИЯ

ВНИМАНИЕ! Я буду постоянно обновлять данную страницу и внедрять в нее различные свойства, которые можно будет задавать нашим дивам. Поэтому почаще заглядывайте на эту страницу, чтобы быть в курсе последних изменений, которые касаются div-ов. Удачи в кодинге.

cruelten.ru

Смотрите также

• 
• 
  (Function(I,s,o,g,r,a,m){I['googleanalyticsobject']=R
• 
  .html" title="">
  
• 
• 
• 
• 
•